<template>
    <div>
        <el-card class="box-card">
            <!-- card里面的封装的组件左按钮，右自定义-->
            <pageToolLys>
                <template v-slot:before>
                    <el-button size='small' type="primary" @click="addEstate">添加资产</el-button>
                </template>
                <template v-slot:after>
                    <el-row type="flex" class="search">
                        <el-select v-model="selectCategory">
                            <el-option label="全部分类" :value="null"></el-option>
                            <el-option v-for="item in CategoryList" :key="item.id" :label="item.title"
                                :value="item.id" />
                        </el-select>
                        <el-select v-model="selectAgent">
                            <el-option label="全部经纪" :value="null"></el-option>
                            <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                        <el-input class="inp" v-model="selectInput" placeholder="请输入关键字" />
                        <el-button class="btn" @click="select">筛选</el-button>
                    </el-row>
                </template>
            </pageToolLys>
            <!-- 表格 -->
            <el-table border :data="tableData" stripe style="width: 100%">
                <el-table-column prop="image" label="封面">
                    <template v-slot="{ row }">
                        <img v-imgError="defaultUrl" :src="row.image" alt="" style="width:150px; padding-right: 20px;">
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="tags" label="标签">
                    <template v-slot="{ row }">
                        <el-tag type="success" v-for="item in row.tags" :key="item.id">
                            {{ item }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="category.title" label="分类">
                </el-table-column>
                <el-table-column prop="agent.name" label="经纪">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                </el-table-column>
                <el-table-column prop="desc" label="介绍">
                </el-table-column>
                <el-table-column prop="photos" label="图片">
                    <template v-slot="{ row }">
                        <img v-imgError="defaultUrl" v-for="item in row.photos" :src="item" style="width:50px;">
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ row }">
                        <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteEstate(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="center">
                <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize"
                    @current-change="currentChange">
                </el-pagination>
            </el-row>
        </el-card>
        <!-- 新增修改dialog弹窗 -->
        <StateDialog ref="StateDialog" :showDialog.sync="showDialog" @updateList="getEstateList"
            @updataNum="getEstateNum"></StateDialog>


    </div>
</template>
<script>
import StateDialog from './components/StateDialog.vue'
import { getEstateList, deleteEstate, getEstateNum, getCategoriesList } from '@/api/estate'
import { getAgentsList } from '@/api/customer'
import defaultUrl from '@/assets/common/bigUserHeader.png'

export default {
    components: {
        StateDialog
    },
    data() {
        return {
            tableData: [],
            showDialog: false,
            defaultUrl,
            total: 0, //总数量
            page: 0, //第几个开始请求
            pageSize: 2, //每次请求几个
            selectCategory: null, // 选择分类双向绑定
            selectAgent: null, //选择经纪双向绑定
            agentList: [], //经纪列表
            CategoryList: [],//分类列表
            selectInput: '' //双向绑定搜索input
        }
    },
    created() {
        this.getEstateList()
        this.getEstateNum() //获取资产总数目
        this.getAgentsList() //获取经纪列表
        this.getCategoriesList() //获取分类列表
    },
    methods: {
        // 获取分类列表
        async getCategoriesList() {
            const res = await getCategoriesList()
            this.CategoryList = res.data
        },
        async getAgentsList() { //获取经纪列表
            const res = await getAgentsList()
            this.agentList = res.data
        },
        async getEstateList() { // 获取资产列表
            const res = await getEstateList({
                _limit: this.pageSize,
                _start: this.page,
                title_contains: this.selectInput,
                agent: this.selectAgent,
                category: this.selectCategory
            })
            console.log(res)
            this.tableData = res.data
        },
        async addEstate() { //添加资产
            this.showDialog = true
            this.$refs.StateDialog.getAgentsList()
        },
        edit(id) { //修改资产信息
            this.showDialog = true
            this.$refs.StateDialog.getEstateInfo(id)
        },
        deleteEstate(id) { //确认删除
            this.$confirm('确定删除该信息', '提示', {
                type: 'warning'
            }).then(async () => {
                if (this.tableData.length === 1 && this.page !== 0) {
                    this.page = this.page - this.pageSize
                }
                await deleteEstate(id) //发送删除请求
                this.getEstateList()
                this.getEstateNum() //重新请求数量
            }).catch(() => {
                console.log('你点击了取消')
            })
        },
        async getEstateNum() { //获取总资产数目
            const res = await getEstateNum({
                title_contains: this.selectInput,
                agent: this.selectAgent,
                category: this.selectCategory
            })
            // console.log(res)
            this.total = res.data
        },
        currentChange(page) { //触发当前分页切换请求
            this.page = (page - 1) * this.pageSize
            this.getEstateList() //重新渲染
            this.getEstateNum() //重新请求数量
        },
        //搜索按钮方法
        select() {
            console.log(this.selectCategory)
            console.log(this.selectAgent)
            this.getEstateList()  //重新获取资产列表
            this.getEstateNum() //重新获取资产数量
        }
    }
}
</script>
<style scoped>

</style>